<template>
    <div class="container">
    <img class="login-bg" :src="background" alt="" />
    <div class="card">
    <div style="font-size: 10px;font-weight: bold;font-family: SimHei;border-bottom: 3px solid #000000;">控制台</div>

    <div style="font-size: large;padding: 3%;">

      <div v-for="directory in directoryList">
        <a-row type="flex" align="top">
          <!-- 标题部分 -->
          <a-col :span="4" >
           <component :is= "directory.icon" class="col-icon"/>
            {{directory.name}}
              <p class="col-font">{{directory.text}}</p>
          </a-col>
          <!-- 竖分割线 -->
          <a-col :span="1" style="margin-left: 20px;">
            <a-divider type="vertical" class="col-divider"/>
          </a-col>
          <!-- 功能详情 -->
          <a-col :span="4" v-for="child in directory.child">
            <a-button style="margin-top: 8%;" @click="Push(child.route)">
              <component :is= "child.childicon"/>
              {{child.childname }}
            </a-button>
          </a-col>
        </a-row>
        <!-- 横分割线 -->
        <a-row>
          <a-divider class="cow-divider"/>
        </a-row>
    </div>
  </div>
</div>
    </div>
</template>

<script setup>
import { ref, reactive, withDirectives } from 'vue';

import { useRouter } from 'vue-router';
import { SettingOutlined,UserSwitchOutlined,PartitionOutlined,AppstoreOutlined} from '@ant-design/icons-vue';
import { FileTextFilled,PictureFilled,AppstoreFilled,ProjectFilled,ControlFilled,CodeFilled,FlagFilled,TagsFilled,IdcardFilled} from '@ant-design/icons-vue';
const background = new URL('@/assets/login-bg.jpg', import.meta.url).href;

// 路由
const router = useRouter();
//测试数据
const directoryList = [{
  name: "偏好",
  icon: SettingOutlined,
  text:"您可以设定系统偏好，管理个人信息",
  child:[{
    childicon:FileTextFilled,
    childname: "个人设定",
    route:{name: 'PersonalSetting'}
    },
    {
    childicon:PictureFilled,
    childname: "桌布设定",
    route:{name: 'TableclothSetting'}
    },
  ]},
  {
  name: "应用",
  icon: AppstoreOutlined,
  text:"您可以建立应用，管理应用功能，以及进行应用功能与角色的绑定设定",
  child:[{
    childicon:AppstoreFilled,
    childname: "应用设定",
    route:{name: 'AppSetting'}
    },{
    childicon:ProjectFilled,
    childname: "功能设定",
    route:{name: 'FunctionSetting'}
    },{
    childicon:CodeFilled,
    childname: "角色设定",
    route:{name: 'RoleSetting'}
    },{
    childicon:ControlFilled,
    childname: "权限设定",
    route:{name: 'PermissionSetting'}
    },
  ]
  },
  {
  name: "组织",
  icon: PartitionOutlined,
  text:"您可以管理您的组织结构，店铺区域，以及进行应用授权",
  child:[{
    childicon:FlagFilled,
    childname: "组织设定",
    route:{name: 'OrganizationSetting'}
    },
    {
    childicon:TagsFilled,
    childname: "应用授权",
    route:{name: 'AppAuthorization'}
    },
  ]
  },
  {
  name: "员工",
  icon: UserSwitchOutlined,
  text:"您可以管理员工，并授权身份",
  child:[{
    childicon:IdcardFilled,
    childname: "员工设定",
    route:{name: 'EmployeeSetting'}
    }
  ]},

];
//路由转换
const Push = address => {
  //可用path和name,二选一即可
  router.push(address)
}

</script>

<style lang="less" scoped>

.container {
  display: flex;
  height: 100%;
  padding-top: 7%;
  flex-direction: column;
  align-items: center;
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
  .card{
  height: 64vh;
  width: 60%;
  margin-top: -3%;
  border: 1px solid #969696;
  box-shadow: 0 0 10px rgba(106, 106, 106, 0.4);
  background-color: rgb(255, 255, 255);
  z-index: 9999;
  }
  .col-icon{
    font-size:20px ;
    padding-left:10% ;
    margin-right: 3%;
    color: rgb(0, 0, 0)
  }
  .col-font{
    font-size: 9px;
    padding-left:28%;
  }
  .col-divider{
    height: 60px;
    background-color: #cacaca
  }
  .cow-divider{
    // height: 2px;
    background-color: #cacaca;
    margin-top: 1%;
  }
}
</style>
